<!-- @format -->

<template>
  <view class="book-item">
    <view class="book-title">
      <text class="book-name" @click="$emit('click', book)">
        {{ book.name }}
      </text>
      <slot></slot>
    </view>
    <view v-if="book.desc" class="book-desc" @click="$emit('click', book)">{{
      book.desc
    }}</view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps<{
  book: any
}>()

const emits = defineEmits(['click'])
</script>

<style scoped>
.book-item {
  border: 1px solid #ddd;
  padding: 8rpx 20rpx;
  margin-top: 20rpx;
}
.book-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.book-name {
  padding: 20rpx 0;
  flex: 1;
  margin-right: 20rpx;
}
.book-desc {
  border-top: 1px solid #f0f0f0;
  font-size: 28rpx;
  padding: 8rpx 0;
}
</style>
